<template>
  <div>
    <t-popup
      style="width: 95%"
      v-model="showPopup"
      placement="center"
      :destroy-on-close="true"
      :round="true"
      @closed="closehide"
    >
      <div class="popup-content">
        <div class="proptitle">学校{{ endtext || "新增" }}</div>
        <div class="form-content">
          <t-form
            :inline="inline"
            :data="formData"
            :rules="rules"
            ref="rulesForm"
            label-position="right"
          >
            <t-form-item
              label="省："
              label-width="170"
              prop="province"
              name="province"
              v-if="authority([2])"
            >
              <t-input
                v-model.trim="formData.province"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请填写所在省份"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="所在城市："
              label-width="170"
              prop="city"
              name="city"
              v-if="authority([2])"
            >
              <t-input
                v-model.trim="formData.city"
                maxlength="60"
                borderless
                clearable
                align="right"
                placeholder="请填写所在城市"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="所在区县："
              label-width="170"
              prop="county"
              name="county"
              v-if="authority([2])"
            >
              <t-input
                v-model.trim="formData.county"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请填写所在区县"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="学校名称："
              label-width="170"
              prop="school_name"
              v-if="authority([2])"
              name="school_name"
            >
              <t-input
                v-model.trim="formData.school_name"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入学校名称"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="学校类别："
              label-width="170"
              prop="school_type"
              v-if="authority([2])"
              name="school_type"
            >
              <t-input
                v-model.trim="formData.school_type"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入学校类别"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="学校人数："
              label-width="170"
              prop="school_num"
              name="school_num"
            >
              <t-input
                v-model.trim="formData.school_num"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入学校人数"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="班级个数："
              label-width="170"
              prop="class_num"
              name="class_num"
            >
              <t-input
                v-model.trim="formData.class_num"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入班级个数"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="教师个数："
              label-width="170"
              prop="teacher_num"
              name="teacher_num"
            >
              <t-input
                v-model.trim="formData.teacher_num"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入教师个数"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="学校负责人："
              label-width="170"
              prop="director_name"
              name="director_name"
            >
              <t-input
                v-model.trim="formData.director_name"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入学校负责人姓名"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="学校负责人电话："
              label-width="170"
              prop="director_phone"
              name="director_phone"
            >
              <t-input
                v-model.trim="formData.director_phone"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="学校项目负责人电话"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item label="职务：" label-width="170" prop="job" name="job">
              <t-input
                v-model.trim="formData.job"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="学校项目负责人职务"
                style="width: 200px"
              ></t-input>
            </t-form-item>

            <t-form-item label-width="170" prop="instrument" name="instrument">
              <!--  <t-action-sheet v-model="visible" :items="baseData.items" @selected="handleSelected" @cancel="handleCancel" /> -->
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="学校是否有直播工具："
                    :note="formData.instrument || '是/否'"
                    arrow
                    @click="popupShow('instrument')"
                  >
                    <template #note>
                      <span :class="formData.instrument ? 't_cell' : ''">{{
                        showtitles(linePlanList, formData.instrument) || "是/否"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-action-sheet
                v-model="visible.instrument"
                :items="linePlanList"
                @cancel="visiblehide"
                :close-on-overlay-click="false"
                :show-overlay="false"
                readonly
                @selected="receptionData('instrument', $event)"
              />
            </t-form-item>
            <!-- 1 -->
            <t-form-item
              label="年级："
              label-width="170"
              prop="grade"
              name="grade"
            >
              <t-input
                v-model.trim="formData.grade"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请填写年级"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="班级："
              label-width="170"
              prop="class_name"
              name="class_name"
            >
              <t-input
                v-model.trim="formData.class_name"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入学校班级"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label-width="170"
              prop="course"
              name="course"
              requiredMark
            >
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell title="课程：" arrow @click="popupShow('course')">
                    <template #note>
                      <span :class="formData.course ? 't_cell' : ''">{{
                        formData.course || "请选择课程"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
                <DataSelector
                  :value="visible.course"
                  @close="visiblehide"
                  :selekey="'course'"
                  @change="changeSele('course', 'course_name', $event)"
                ></DataSelector>
              </div>
              <!-- 数据搜索 -->
            </t-form-item>
            <t-form-item
              label="第几节："
              label-width="170"
              prop="some"
              name="some"
            >
              <t-input
                v-model.trim="formData.some"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入第几节"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item label-width="170" prop="week" name="week">
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="周几："
                    :note="formData.week || '请选择周几'"
                    arrow
                    @click="popupShow('week')"
                  >
                    <template #note>
                      <span :class="formData.week ? 't_cell' : ''">{{
                        formData.week || "请选择周几"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-action-sheet
                v-model="visible.week"
                :items="weeklist"
                @cancel="visiblehide"
                :close-on-overlay-click="false"
                :show-overlay="false"
                @selected="receptionData('week', $event)"
              />
            </t-form-item>
            <t-form-item label-width="170" prop="tart_time" name="tart_time">
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="上课时间："
                    :note="formData.tart_time || '请选择上课时间'"
                    arrow
                    @click="popupShow('tart_time')"
                  >
                    <template #note>
                      <span :class="formData.tart_time ? 't_cell' : ''">{{
                        formData.tart_time || "请选择上课时间"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-popup
                v-model="visible.tart_time"
                placement="bottom"
                :close-on-overlay-click="false"
                :show-overlay="false"
              >
                <t-date-time-picker
                  @cancel="visiblehide"
                  @confirm="receptionData('tart_time', $event)"
                  :value="formData.tart_time"
                  :mode="[null, 'minute']"
                  title="选择上课时间"
                  format="hh:mm:ss"
                />
              </t-popup>
            </t-form-item>
            <t-form-item label-width="170" prop="end_time" name="end_time">
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="下课时间："
                    :note="formData.end_time || '请选择下课时间'"
                    arrow
                    @click="popupShow('end_time')"
                  >
                    <template #note>
                      <span :class="formData.end_time ? 't_cell' : ''">{{
                        formData.end_time || "请选择下课时间"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-popup
                v-model="visible.end_time"
                placement="bottom"
                :close-on-overlay-click="false"
                :show-overlay="false"
              >
                <t-date-time-picker
                  @cancel="visiblehide"
                  @confirm="receptionData('end_time', $event)"
                  :value="formData.end_time"
                  :mode="[null, 'minute']"
                  title="选择下课时间"
                  format="hh:mm:ss"
                />
              </t-popup>
            </t-form-item>
            <t-form-item label-width="170" prop="num_time" name="num_time">
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="实际上课时间："
                    :note="formData.num_time || '请选择实际上课时间'"
                    arrow
                    @click="popupShow('num_time')"
                  >
                    <template #note>
                      <span :class="formData.num_time ? 't_cell' : ''">{{
                        formData.num_time || "请选择上课时间"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-popup
                v-model="visible.num_time"
                placement="bottom"
                :close-on-overlay-click="false"
                :show-overlay="false"
              >
                <t-date-time-picker
                  @cancel="visiblehide"
                  @confirm="receptionData('num_time', $event)"
                  :value="formData.num_time||dayjs().format('YYYY-MM-DD')"
                  :mode="['date']"
                  title="选择日期"
                  format="YYYY-MM-DD"
                />
              </t-popup>
            </t-form-item>
            <t-form-item
              label="在地老师名称："
              label-width="170"
              prop="zuser_name"
              name="zuser_name"
            >
              <t-input
                v-model.trim="formData.zuser_name"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入在地老师名称"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="联系电话："
              label-width="170"
              prop="user_phone"
              name="user_phone"
            >
              <t-input
                v-model.trim="formData.user_phone"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入联系电话"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item
              label="班级规模："
              label-width="170"
              prop="class_mode"
              name="class_mode"
            >
              <t-input
                v-model.trim="formData.class_mode"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请输入班级规模"
                style="width: 200px"
              ></t-input>
            </t-form-item>

            <t-form-item
              label-width="170"
              prop="admission_time"
              v-if="authority([4])"
              name="admission_time"
            >
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="入校时间："
                    :note="formData.num_time || '请选择入校时间'"
                    arrow
                    @click="popupShow('admission_time')"
                  >
                    <template #note>
                      <span :class="formData.admission_time ? 't_cell' : ''">{{
                        formData.admission_time || "请选择上课时间"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-popup
                v-model="visible.admission_time"
                placement="bottom"
                :close-on-overlay-click="false"
                :show-overlay="false"
              >
                <t-date-time-picker
                  @cancel="visiblehide"
                  @confirm="receptionData('admission_time', $event)"
                  :value="formData.admission_time"
                  :mode="['date']"
                  title="请选择入校时间"
                  format="YYYY-MM-DD"
                />
              </t-popup>
            </t-form-item>
            <!-- 在线区域负责人 在此添加 -->
            <t-form-item
              label-width="170" 
              prop="zxuser_name"
              name="zxuser_name"
              v-if="authority([2])"
            >
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="线上区域负责人："
                    arrow 
                    @click="popupShow('zxuser_name')"
                  >
                    <template #note>
                      <span :class="formData.zxuser_name ? 't_cell' : ''">{{
                        formData.zxuser_name || "线上区域负责人"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
                <DataSelector
                  :value="visible.zxuser_name"
                  @close="visiblehide"
                  :selekey="'zxuser'"
                  @change="
                    changeSele('zxuser_name', 'username', $event, 'zxuser_id')
                  "
                ></DataSelector>
              </div>
            </t-form-item>
            <!-- 在线区域负责人添加区间 -->
            <t-form-item
              label-width="170" 
              prop="user_name"
              name="user_name"
              v-if="authority([2])"
            >
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="在地工作人员："
                    arrow
                    @click="popupShow('user_name')"
                  >
                    <template #note>
                      <span :class="formData.user_name ? 't_cell' : ''">{{
                        formData.user_name || "选择在地工作人员"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
                <DataSelector
                  :value="visible.user_name"
                  @close="visiblehide"
                  :selekey="'zdgzuser'" 
                  @change="
                    changeSele('user_name', 'username', $event, 'user_id')
                  "
                ></DataSelector>
              </div>
            </t-form-item>
          </t-form>
        </div>

        <div
          class="t-form__footer"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
          "
        >
          <t-button
            size="large"
            theme="primary"
            variant="text"
            @click="showPopup = false"
            >关闭</t-button
          >
          <!-- <el-button type="success" @click="showPopup = false" plain>关闭</el-button> -->
          <div style="display: flex">
            <t-button
              style="margin: 0 10px"
              theme="primary"
              :disabled="loading"
              @click="submitForm()"
            >
              {{ endtext || "新增" }}
            </t-button>
            <!-- <el-button type="success"  @click="submitForm()">{{ endtext || "新增" }}</el-button> -->
          </div>
        </div>
      </div>
    </t-popup> 
  </div>
</template>
    
    <script>
import dayjs from "dayjs";
import { getStorage } from "@/utils/util";
import DataSelector from "@/components/h5com/dataSelector.vue";
import { Message } from "tdesign-mobile-vue";

export default {
  components: {
    DataSelector,
  },
  props: {
    status: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dayjs: dayjs,
      endtext: "", //编辑状态
      userInfo: "", //权限数据
      showPopup: false,
      visible: {},

      formData: {},
      loading: false,
      couList: [],
      userIdList: [],
      weeklist: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      isStatusList: [
        { value: "1", label: "未排课" },
        { value: "2", label: "已排课" },
      ],
      verifyStatus: [
        { value: "1", label: "待核校" },
        { value: "2", label: "已核校" },
        { value: "3", label: "驳回" },
        { value: "4", label: "已通过" },
        { value: "5", label: "问题校" },
      ],
      linePlanList: [
        {
          value: "1",
          label: "是",
          id: "1",
        },
        {
          value: "2",
          label: "否",
          id: "2",
        },
      ],
      rules: {
        instrument: [
          {
            required: true,
            message: "请选择学校是否有直播工具",
            trigger: "blur",
          },
        ],
        admission_time: [
          { required: true, message: "请选择入校时间", trigger: "blur" },
        ],
        province: [
          { required: true, message: "请输入所在省份", trigger: "blur" },
        ],
        city: [{ required: true, message: "请输入所在城市", trigger: "blur" }],
        county: [
          { required: true, message: "请输入所在区县", trigger: "blur" },
        ],
        school_name: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
        ],
        school_type: [
          { required: true, message: "请输入学校类别", trigger: "blur" },
        ],
        school_level: [
          { required: true, message: "请输入学校级别", trigger: "blur" },
        ],
        school_num: [
          { required: true, message: "请输入学校人数", trigger: "blur" },
        ],
        class_num: [
          { required: true, message: "请输入班级个数", trigger: "blur" },
        ],
        teacher_num: [
          { required: true, message: "请输入教师个数", trigger: "blur" },
        ],
        director_name: [
          { required: true, message: "请输入学校负责人姓名", trigger: "blur" },
        ],
        director_phone: [
          { required: true, message: "请输入学校负责人电话", trigger: "blur" },
        ],
        job: [{ required: true, message: "请输入职务", trigger: "blur" }],
        user_name: [
          { required: true, message: "选择在地工作人员", trigger: "change" },
        ],
        zxuser_name: [
          { required: true, message: "选择在线区域负责人", trigger: "change" },
        ],
        grade: [{ required: true, message: "请输入年级", trigger: "blur" }],
        class_name: [
          { required: true, message: "请输入学校班级", trigger: "blur" },
        ],
        course: [
          { required: true, message: "请输入班级科目", trigger: "blur" },
        ],
        some: [{ required: true, message: "请输入第几节", trigger: "blur" }],
        week: [{ required: true, message: "请输入周几", trigger: "blur" }],
        tart_time: [
          { required: true, message: "请输入上课时间", trigger: "change" },
        ],
        end_time: [
          { required: true, message: "请输入下课时间", trigger: "change" },
        ],
        num_time: [
          { required: true, message: "请输入实际上课时间", trigger: "blur" },
        ],
        zuser_name: [
          { required: true, message: "请输入在地老师名称", trigger: "blur" },
        ],
        user_phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        class_mode: [
          { required: true, message: "请输入班级规模", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
  },
  methods: {
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },

    submitForm() {
      // console.log(this.$refs.rulesForm, "--------this.$refs.rulesForm");
      
      this.$refs["rulesForm"].validate().then((valid) => { 
         if (valid===true) {
          console.log("表单验证成功");
          //   数据新增
          //   this.showPopup = false;
          //   this.$emit('submitForm', this.formData);
          if(!this.formData.id) this.$emit("addForm", this.formData);
          if(this.formData.id){
            let isStatusListArrs=this.isStatusList.filter(item=>item.label==this.formData.is_status)
            // 筛选出来的 排课和未排课
            if(isStatusListArrs.length) this.formData.is_status=isStatusListArrs[0].value;
            if(!this.formData.is_status) this.formData.is_status=1;
            Object.assign(this.formData, { ["status_text"]: undefined });
            this.$emit("endForm", this.formData);
          }
         
        } else {
          Message.error('请输入必填项');

          console.log("表单验证失败");
        }
      });
      //  this.$refs.rulesForm.validate(); // 重置表单并清除验证状态
      // this.showPopup=false;
      // this.$emit('submitForm',this.formData)
    },
    changeSele(k, name, e, k2) {
      // k是需要覆盖的数据 name是e下面的数据覆盖到k k2是获取的id
      this.formData[k] = e[name];
      if (e.userid) {
        this.formData[k2] = e.id;
      }
    },
    // showtitles 显示标题
    showtitles(arr, id) {
      let titles = ""; 
        if (!id) return;
       let arrs2= arr.filter((item) => item.value == id); 
  
        if (arrs2.length) titles = arrs2[0].label; 
  
        return titles;
    },
    receptionData(key, value) {
      // 接受弹出层的数据给 formData 只接受但数据
      if (typeof value === "object" && value.value) {
        this.formData[key] = value.value;
      }

      if (typeof value == "string") this.formData[key] = value;

      this.visiblehide();
    },
    // 遮罩显示点击
    popupShow(value) {
      this.visible = {};
      console.log(value, "---------value");
      this.visible[value] = true;
    },
    closehide() {
      // 关闭清空
      this.formData = {};
      this.endtext = '';
      this.visiblehide();
    },
    visiblehide(value) {
      console.log("执行", value);
      // 遮罩层关闭
      this.visible = {};
    },
    async courseMethod(query) {
      if (!query) {
        this.couList = [];
        return;
      }

      this.loading = true;
      try {
        // 模拟API调用，实际应替换为真实接口
        const courseData = JSON.parse(getStorage("courseObj"))?.course || [];
        this.couList = courseData.filter((item) =>
          item.course_name.toLowerCase().includes(query.toLowerCase())
        );
      } finally {
        this.loading = false;
      }
    },
    async userMethod(query) {
      if (!query) {
        this.userIdList = [];
        return;
      }

      this.loading = true;
      try {
        const userData = JSON.parse(getStorage("courseObj"))?.zdguser || [];
        this.userIdList = userData.filter((item) =>
          item.username.toLowerCase().includes(query.toLowerCase())
        );
      } finally {
        this.loading = false;
      }
    },
    handleStatusChange(value) {
      this.$emit("status-change", value);
    },
    reset() {
      // 数据清空
      this.formData = {};
      this.showPopup = false;

      this.$emit("resetscreem");
    },
   
    onSearch() {
      this.showPopup = false;
      this.$emit("search", this.formData);
    },
    editupdata(row,text) {
      // 编辑 进入编辑  
      console.log('text',text)
      this.endtext = text||"编辑";
      this.showPopup = true;
      this.formData = { ...row };
    },
  },
};
</script>
    
    <style scoped>
.popup-content {
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  width: 90vw;
  max-width: 500px;
  box-sizing: border-box;
}

.popup-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.empty-tips {
  padding: 8px 0;
  color: var(--td-gray-color-6);
  text-align: center;
}

@media (max-width: 640px) {
  .popup-content {
    width: 100%;
    overflow-y: auto;
  }

  :deep(.t-form-item__label) {
    font-size: 14px;
  }

  :deep(.t-picker__toolbar) {
    padding: 8px 12px;
  }
}
</style>
    
    <style lang="scss" scoped>
.custom-input {
  :deep(.t-t-input--default) {
    font-size: 20px; /* 调整输入框 placeholder 字体大小 */
  }
}
</style>
    
    <style>
.t-form__label--right {
  font-size: 14px;
}
.t-cell__title-text {
  font-size: 14px;
}
.t-form__label--left {
  font-size: 14px; /* 调整左侧标签字体大小 */
}

.t-form__label {
  padding: 0;
}

.t-input--default {
  font-size: 13px;
}

.t-input--default::placeholder {
  color: gray; /* 设置颜色 */
  font-size: 14px !important; /* 设置字体大小 */
  border: none;
  /* 其他样式，例如字体系列 */
}

.t-form__item {
  padding-left: 10px;
  padding-right: 10px;
}

.t-input--default {
  font-size: 14px; /* 调整输入框字体大小 */
  border-bottom: none !important; /* 移除默认下划线 */
}
.t_cell {
  color: #000;
  font-size: 14px;
}
.t-cell__note {
  font-size: 14px;
}
.proptitle {
  font-size: 16px;
  font-weight: 600;
  padding: 10px 0;
}
.form-content {
  min-height: 50vh;
  max-height: 70vh;
  overflow-y: auto;
}
</style>